<template>
    <div class="line-text">
        <div class="text-label">
            <slot name="text" value="label">{{ label }}</slot>
        </div>
        <div class="text-info">
            <slot name="default" :value="text">{{ text }}{{ appendText }}</slot>
        </div>
    </div>
</template>

<script lang="ts">
import { toRefs } from 'vue'
interface Props {
    [key: string]: any,
}
export default {
    props: {
        text: {
            type: String,
            default: ""
        },
        label: {
            type: String,
            default: ""
        },
        appendText: {
            type: String,
            default: "",
        }
    },
    setup(props: Props) {
        const { text, label } = toRefs(props)
        return {
            text, label
        }
    }
}
</script>

<style scoped lang="scss">
.line-text {
    bottom: 10px;
    box-sizing: border-box;
    padding: 16px;
    border-bottom: 1px solid var(--wait-task-bg-color);

    .text-label {
        font-size: 12px;
        color: rgba(138, 139, 179, 1);
        margin-bottom: 12px;
    }

    .text-info {
        font-size: 16px;
        color: rgba(16, 39, 90, 1);
    }
}
</style>